import EchartsComponent, { MyChartOption } from '@/components/EchartsComponent';
import { Link } from '@@/exports';
import { useIntl } from '@umijs/max';
import { DatePicker, Radio, Space } from 'antd';
import dayjs, { Dayjs } from 'dayjs';
import React, { useState } from 'react';

type IProps = {
  incomeInfoOptions: MyChartOption;
  sendIncomeTimeInfo: (data: any) => void;
};
const IncomeStatistics: React.FC<IProps> = (props) => {
  const [incomeRange, setIncomeRange] = useState<string>('date');
  const [selectRange, setSelectRange] = useState<Dayjs[]>([dayjs().subtract(6, 'day'), dayjs()]);
  const { incomeInfoOptions, sendIncomeTimeInfo } = props;
  const { RangePicker } = DatePicker;
  const intl = useIntl();

  const RadioButtons = [
    {
      label: intl.formatMessage({ id: 'global.day' }),
      value: 'date',
    },
    {
      label: intl.formatMessage({ id: 'global.month' }),
      value: 'month',
    },
    {
      label: intl.formatMessage({ id: 'global.year' }),
      value: 'year',
    },
  ];
  const disabledDate = (current, { from }) => {
    if (incomeRange === 'date') {
      if (from) {
        return Math.abs(current.diff(from, 'days')) >= 14;
      }
      return false;
    } else if (incomeRange === 'month') {
      if (from) {
        return Math.abs(current.diff(from, 'months')) >= 11;
      }
      return false;
    } else if (incomeRange === 'year') {
      if (from) {
        return Math.abs(current.diff(from, 'years')) >= 4;
      }
      return false;
    }
  };
  return (
    <div>
      <div style={{ marginTop: '-2.5rem' }}>
        <Space style={{ display: 'flex', justifyContent: 'right' }}>
          <Radio.Group
            value={incomeRange}
            buttonStyle={'solid'}
            size={'small'}
            onChange={(e) => {
              setIncomeRange(e.target.value);
              setSelectRange([
                e.target.value === 'date'
                  ? dayjs().subtract(6, 'day')
                  : e.target.value === 'month'
                  ? dayjs().subtract(2, 'month')
                  : dayjs().subtract(1, 'year'),
                dayjs(),
              ]);
              sendIncomeTimeInfo({
                incomeStartTime:
                  e.target.value === 'date'
                    ? dayjs().subtract(6, 'day').format('YYYY-MM-DD')
                    : e.target.value === 'month'
                    ? dayjs().subtract(2, 'month').format('YYYY-MM')
                    : dayjs().subtract(1, 'year').format('YYYY'),
                incomeEndTime:
                  e.target.value === 'date'
                    ? dayjs().format('YYYY-MM-DD')
                    : e.target.value === 'month'
                    ? dayjs().format('YYYY-MM')
                    : dayjs().format('YYYY'),
                incomeUnit: e.target.value === 'date' ? 'day' : e.target.value,
              });
            }}
          >
            {RadioButtons.map((item) => {
              return (
                <Radio.Button key={item.value} value={item.value}>
                  {item.label}
                </Radio.Button>
              );
            })}
          </Radio.Group>
          {/*@ts-ignore*/}
          <RangePicker
            allowClear={false}
            disabledDate={disabledDate}
            picker={incomeRange}
            size={'small'}
            style={{ width: 190 }}
            value={selectRange}
            onCalendarChange={(value: Dayjs[], dateString, info) => {
              if (info.range === 'end') {
                const dateRange = value[0] > value[1] ? [value[1], value[0]] : value;
                setSelectRange([dateRange[0], dateRange[1]]);
                sendIncomeTimeInfo({
                  incomeStartTime:
                    incomeRange === 'date'
                      ? dayjs(dateRange[0]).format('YYYY-MM-DD')
                      : incomeRange === 'month'
                      ? dayjs(dateRange[0]).format('YYYY-MM')
                      : dayjs(dateRange[0]).format('YYYY'),
                  incomeEndTime:
                    incomeRange === 'date'
                      ? dayjs(dateRange[1]).format('YYYY-MM-DD')
                      : incomeRange === 'month'
                      ? dayjs(dateRange[1]).format('YYYY-MM')
                      : dayjs(dateRange[1]).format('YYYY'),
                  incomeUnit: incomeRange === 'date' ? 'day' : incomeRange,
                });
              }
            }}
          />
          <Link to={'/statistics/income'}>
            <div style={{ cursor: 'pointer', marginRight: '-15px' }}>
              <span style={{ color: '#000022' }}>
                {intl.formatMessage({ id: 'global.detail' })}
              </span>
              <span style={{ color: '#999999', marginLeft: '1px' }}> {'>'}</span>
            </div>
          </Link>
        </Space>
        <EchartsComponent option={incomeInfoOptions} height={'20rem'} style={{ width: '27rem' }} />
      </div>
    </div>
  );
};

export default IncomeStatistics;
